/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */

@use 'sass:meta'; // To enable @use via meta.load-css and keep comments in order

/* [START maps_places_autocomplete_service] */
@include meta.load-css("../../shared/scss/material-design-theme.scss");
@include meta.load-css("../../shared/scss/material-design-select.scss");

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  height: 100%;
}

#service {
  margin-top: 1rem;
  box-sizing: border-box;
  display: flex;
  overflow: initial;

  #inputs {
    margin-right: 1em;
    flex-basis: 0;
    flex-grow: 1;

    .row {
      display: flex;
      margin-bottom: 1em;
      width: 100%;
      label,
      .mdc-select {
        flex-grow: 1;
      }
      .mdc-text-field {
        width: 100%;
      }
    }
  }

  #results {
    flex-basis: 0;
    flex-grow: 3;
    overflow: hidden;
    .tab-content {
      display: none;
      height: 300px;
      overflow: auto;
    }
    .tab-content--active {
      display: block;
    }
  }
}

#map {
  height: 200px;
}

pre {
  background: whitesmoke;
  border: darken(whitesmoke, 2%) 1px solid;
  border-radius: 2px;
  page-break-inside: avoid;
  font-family: monospace;
  overflow: auto;
  padding: 0.5em;
  word-wrap: break-word;
  color: rgba(0, 0, 0, 0.6);
}

.mdc-select__anchor,
.mdc-select__menu {
  width: 100%;
}

// fix the focused primary color
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
  color: var(--mdc-theme-primary);
}

.mdc-switch.mdc-switch--checked .mdc-switch__thumb {
  background-color: var(--mdc-theme-primary);
  border-color: var(--mdc-theme-primary);
}
.mdc-switch.mdc-switch--checked .mdc-switch__track {
  background-color: var(--mdc-theme-primary);
}

.mdc-switch__thumb-underlay::before,
.mdc-switch__thumb-underlay::after {
  background-color: var(--mdc-theme-primary);
}

/* [END maps_places_autocomplete_service] */
